@use "../../assets/scss/mixins/text/text" as *;

@include gwf("Poppins");

html {
  box-sizing: border-box;
  //根元素字体大小；10 / 16 = 62.5%，采用rem单位时，1rem = 10px
  font-size: 62.5%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  &:before,
  &:after {
    box-sizing: inherit;
  }
}
body {
  min-height: 100vh;
  background-color: #154367;
  font-family: "Poppins", sans-serif;
}

.navigation {
  position: absolute;
  width: 50px;
  height: 50px;
  right: 25px;
  top: 25px;
  background-color: #fff;
  z-index: 999;
  border-radius: 4px;
  overflow: hidden;
  transition: height 0.5s, width 0.5s;
  transition-delay: 0s, 0.7s;
  &.active {
    width: 250px;
    height: 350px;
    transition: width 0.5s, height 0.5s;
    transition-delay: 0s, 0.7s;
  }
  .menuToggle {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: #ff4081;
    transition: all 0.5s;
    &.active {
      background-color: #2196f3;
      &::before {
        transform: rotate(315deg);
      }
    }
    &::before {
      content: "+";
      position: absolute;
      width: 50px;
      height: 50px;
      font-size: 3.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-weight: 400;
      transition: transform 0.5s;
    }
  }
  ul {
    position: absolute;
    width: 100%;
    left: 0;
    li {
      position: relative;
      list-style: none;
      width: 100%;
      &:hover {
        background-color: #03a9f4;
        a .title,
        a .icon i {
          color: #fff;
        }
      }
      a {
        position: relative;
        display: flex;
        width: 100%;
        text-decoration: none;
        color: #154367;
        .icon {
          position: relative;
          display: block;
          padding-top: 2.5px;
          min-width: 50px;
          height: 50px;
          text-align: center;
          line-height: 50px;
          //   vertical-align: baseline;
          i {
            font-size: 2rem;
            color: #154367;
          }
        }
        .title {
          position: relative;
          display: block;
          line-height: 50px;
          white-space: nowrap;
          font-size: 1.5rem;
        }
      }
    }
  }
}
